<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ref获取DOM元素和组件</title>
    <script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">

    <input type="button" value="获取元素" @click="getElement">
    <h3 id="myh3" ref="myh3">嗯哈 ，停机了</h3>

    <hr>

    <input type="button" value="获取组件" @click="getComponent">
    <my-com1 ref="mycom1"></my-com1>


</div>

<template id="templ">
    <div>
        <h3 ref="componenth3">这里是 组件</h3>
    </div>
</template>
<script>

    let myCom1 = {
        template: '#templ',
        data() {
            return {
                msg: '调用了组件的msg'
            }
        },
        methods: {
            show() {
                console.log('调用了组件的show方法')
            }
        }
    }

    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            getElement() {
                console.log(this.$refs.myh3.innerText)
            },
            getComponent() {
                //调用子组件中的 ref
                console.log(this.$refs.mycom1.$refs.componenth3.innerText)
                //调用子组件的data数据
                console.log(this.$refs.mycom1.msg)
                //调用子组件的methods
                this.$refs.mycom1.show()
            }
        },
        components: {
            'my-com1': myCom1
        },
    })
</script>

</body>
</html>
